<template>
  <div class="Lmenu">
    <el-scrollbar
      style="height: 100%"
      wrap-class="list"
      wrap-style="overflow-x:hidden;"
    >
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="getIsCollapse"
        unique-opened
        :default-active="$route.path"
        background-color="#324157"
        text-color="#fff"
        active-text-color="#409FFF"
        router
      >
        <!-- 根据获取到的权限列表自动渲染菜单 -->
        <template v-for="item in menuList">
          <!-- 一级 -->
          <el-menu-item
            :index="item.menuUrl"
            :key="item.menuId"
            v-if="item.menuChilds === null"
          >
            <template>
              <i :class="item.iconClass"></i>
              <span>{{ item.menuName }}</span>
            </template>
          </el-menu-item>
          <!-- 二级 -->
          <el-submenu v-else :index="item.menuId" :key="item.menuId">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item
              v-for="item2 in item.menuChilds"
              :index="item2.menuUrl"
              :key="item2.menuId"
            >
              <i :class="item2.iconClass"></i>
              <span>{{ item2.menuName }}</span>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "leftMenu",
  computed: {
    ...mapGetters(["getIsCollapse"])
  },
  data() {
    return {
      menuList: [],
      isCollapse: false
    };
  },
  created() {
    this.getmenu();
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  methods: {
    logout() {
      // 清空token
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 获取请求菜单
    getmenu: function() {
      this.menuList = JSON.parse(sessionStorage.getItem("menuInfo"));
    },
    // 菜单的折叠与展开
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 保存连接的激活地址
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu--inline {
  background-color: #333333;
}

.el-menu-item,
.el-submenu__title {
  /* margin: 10px 0; */
  color: rgb(191, 196, 206) !important;

}
.router-link:active,
.router-link-exact-active {
  color: #c4c4c4 !important;
  text-decoration: none;
}

.Lmenu {
  min-height: 610px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 38.125rem !important;
}

.el-menu--inline .el-menu-item {
  background-color: #283446 !important;
}

.el-menu--inline {
  background-color: #283446 !important;
}
.el-scrollbar {
  background-color: #324157 !important;
}
.el-menu-item:hover,
.el-submenu:hover {
  background-color: rgb(236, 245, 255) !important;
}
.el-menu div:hover {
  background-color: rgb(236, 245, 255) !important;
}
</style>
